<template>
  <div class="Divbox">
    <div style="width: 100%">
      <h1>客服报表</h1>
      <router-link to="#">全部</router-link>
      <router-link to="#">售后</router-link>
      <router-link to="#0-">投诉</router-link>
    </div>
    <div class="ReportBox">
      <div class="widths">
        <span class="iconfont icon-fuwuerji red"></span>
        <div class="whites">
          <span>客服总数</span>
          <router-link to="/Airlines">0</router-link>
        </div>
      </div>

      <div class="widths">
        <span class="iconfont icon-add-s yellow"></span>
        <div class="whites">
          <span>新客服</span>
          <router-link to="/Airlines">0</router-link>
        </div>
      </div>

      <div class="widths">
        <span class="iconfont icon-shizhongclock77 blue"></span>
        <div class="whites">
          <span>进行中</span>
          <router-link to="/Airlines">0</router-link>
        </div>
      </div>

      <div class="widths">
        <span class="iconfont icon-duihao green"></span>
        <div class="whites">
          <span>已完成</span>
          <router-link to="/Airlines">0</router-link>
        </div>
      </div>
    </div>
    <div class="content">
      <ChartLft></ChartLft>
    </div>
    <div class="Reportbottom">
      <biaoge></biaoge>
    </div>
  </div>
</template>

<script>
import biaoge from "../../components/Supplierss/biaoge.vue";
import ChartLft from "../../components/Supplierss/Chart.vue";
export default {
  components: { biaoge, ChartLft },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
  width: 100%;
}
.Divbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  h1 {
    margin: 1%;
    display: inline-block;
  }
}
//头部四个颜色的DIV
.ReportBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid red;
  margin: 0 auto;
  .widths {
    border: 1px solid red;
    width: 23%;
    margin: 0px 1%;
    box-sizing: border-box;
    height: 100px;
    display: flex;
    flex-direction: row;
    .whites {
      display: flex;
      flex-direction: column;
      width: 75%;
      height: 100%;
      span {
        display: inline-block;
        margin-top: 1%;
        margin-left: 3%;
      }
      a {
        margin-top: 1%;
        margin-left: 3%;
        text-decoration: none;
        font-weight: bold;
        color: #208adb;
        font-size: 25px;
      }
      a:hover {
        color: red;
      }
    }
    .red {
      background-color: #dd4b39;
      color: #fff;
    }
    .yellow {
      background-color: #f39c12;
      color: #fff;
    }
    .blue {
      background-color: #00c0ef;
      color: #fff;
    }
    .green {
      background-color: #00a65a;
      color: #fff;
    }
  }
  .widths > span {
    box-sizing: border-box;
    width: 25%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    display: inline-block;
    font-size: 50px;
    border: 1px solid red;
  }
}
//中间部分
.content {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  margin: 0 auto;
  width: 98%;
  height: 550px;
  margin-top: 1%;
  border: 1px solid red;
  justify-content: space-between;
}
//底部
.Reportbottom {
  box-sizing: border-box;
  margin: 30px auto;
  width: 98%;
  // height: 500px;
  border: 1px solid red;
}
</style>